<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2022/4/1
  Time: 12:14
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>


<html>
<head>
    <title>图书在线借阅系统</title>
    <link rel="stylesheet" type="text/css" href="lib/layui/css/layui.css">
    <link rel="stylesheet" type="text/css" href="lib/layui/css/book.css">
    <script type="text/javascript" src="lib/layui/layui.js"></script>
    <style>
        .layui-layout-body {
            background: url("lib/Images/bg-4.jpg") no-repeat;
            background-size: cover;
        }
        .layui-elem-field {
            font-weight: bolder;
        }


        .layui-table-cell {

        height: 50px;

             width: 50px;

             max-width: 100%;

         }

    </style>

    </style>
</head>
<body class="layui-layout-body">
<div class="layui-container-box" style="width:80%;background: url(lib/Images/bg.jpg )">
    <fieldset class="layui-elem-field layui-field-title" >
        <legend>图书信息表</legend>
    </fieldset>
    <div class="demoTable" >
        <div class="layui-form-item" style="width: 70px; margin-left: 30px; margin-bottom: -38px;">

            <div class="layui-input-inline">
                <select  class="layui-select"  id="searchType" name="searchType" lay-filter="searchType" style="align-self: center;" aria-invalid="false" >

                    <option style="width: 70px;" value="bookId" selected="">图书编号</option>
                    <option style="width: 70px;" value="bname">图书名称</option>
                    <option style="width: 70px;" value="bookType">图书类型</option>


                </select>
            </div>

        </div>

        <div class="layui-input-inline">
            <input class="layui-input" name="search" id="search" autocomplete="off" style="width: 100px;margin-left: -120px;" />
        </div>
        <button class="layui-btn" id="searchBtn" data-type="reload" style="margin-left: -20px;">搜索</button>


    </div>
    <table class="layui-hide" style="width: 90%;" id="book_list" lay-filter="book_list" ></table>

    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
</div>
</body>
</html>
<script type="text/html" id="img">
    <img src="{{d.pic}}" style=" align-items: center" width="50" height="40" alt="">
</script>
<script type="text/javascript">
    layui.use(['dropdown', 'util', 'layer', 'table','form'],function () {
        var dropdown = layui.dropdown
            ,util = layui.util
            ,layer = layui.layer
            ,table = layui.table
            ,$ = layui.jquery;

        var form = layui.form;

        //获取下拉框选中的值
        form.on('select(searchType)',function(data){
                category = data.value;
                console.log(category);
                searchType = data.elem[data.elem.selectedIndex].text;
                console.log(searchType);
                form.render('select');
            }


        );

        //输入框判空
        $("#searchBtn").click(function(){
            var $ = layui.$;
            var key = $("#search").val();
            console.log(key);

            if(key==''){

                alert("请输入内容查询！");
                return;

            }else{
                var $ = layui.$, active = {
                    reload:function () {
                        //搜索框
                        var search=$('#search').val();
                        //select 选择搜索类型
                        var searchType =$("#searchType").val();

                        //执行重载
                        table.reload('testReload',{
                            url:'book.let?type=select',
                            page:{
                                curr:1 //重新从第1页开始
                            },
                            where:{
                                search:search,
                                searchType:searchType
                            }

                        });
                    }

                };

                $('.demoTable .layui-btn').on('click', function(){
                    var type = $(this).data('type');
                    active[type] ? active[type].call(this) : '';
                });

            };
        });


        table.render({
            elem:'#book_list',
            url:'book.let?type=query',//数据接口
            title:'图书信息表',
            method:'post',
            page:true,//开启分页
            limit:4,
            limits:[3,5],
            request: {
                page: 1 //页码的参数名称，默认：page
                ,limit: 3//每页数据量的参数名，默认：limit
            } ,
            cols:[[//表头
                {field:'id',title:'图书ID',sort:true,fixed:"left"},
                {field:'bname',title:'书名', width:110},
                {field:'typeId',title:'图书类型',templet:'<div>{{d.type.tname}}</div>'},
                {field:'author',title:'作者',width:80},
                {field:'price',title:'价格', width:50},
                {field:'pic',title:'图片',templet:'#img'},
                {field:'publish',title:'出版社', width:110},
                {field:'stock',title:'库存', width:50},
                {field:'address',title:'地址', width:110},
                {field:'right', title: '操作', toolbar:"#barDemo", width:120}
            ]],
            data:function(res){
                console.log(res);
                return {
                    "code":res.code,
                    "msg":res.message,
                    "count":res.count,
                    "data":res.data.item
                }
            },
            id: 'testReload'
            // done:function (rescurr,count) {
            //     $('div[lay-id="book_list"]').find('.layui-table-cell').css('height','auto')
            // }
        });
        table.on('tool(book_list)',function (obj) {
            var data = obj.data;
            if (obj.event == 'edit'){
                window.location.href = "book.let?type=modifypre&id=" + data.id;
            } else if (obj.event == 'del'){
                layer.confirm('确定删除该条数据吗？', function(index){
                    window.location.href = "book.let?type=remove&id=" + data.id;
                    layer.close(index);
                });
            }
        })
    });
</script>


